<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>联系我们</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        /* Style inputs */
        input[type=text], select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        /* Style the container/contact section */
        .container {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 10px;
        }

        /* Create two columns that float next to eachother */
        .column {
            float: left;
            width: 50%;
            margin-top: 6px;
            padding: 20px;
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 响应式布局 */
        @media screen and (max-width: 600px) {
            .column, input[type=submit] {
                width: 100%;
                margin-top: 0;
            }
        }
    </style>
</head>
<body>
<script src="https://api.map.baidu.com/api?v=2.0&ak=1a3c89ddb9bcfaf5b9dc4b62e3f2a05b"></script>

<!-- <h2>联系表单 - 响应式</h2>
<p>重置浏览器窗口大小，查看效果</p> -->

<div class="container">
    <div style="text-align:center">
        <h2>联系我们</h2>
    </div>
    <div class="row">
        <div class="column">
            <div id="allmap" style="width:100%;height:500px"></div>
        </div>
        <div class="column">
            <form action="/action_page.php">
                <label for="name">姓名</label>
                <input type="text" id="fname" name="name" placeholder="您的称呼..">
                <label for="phone">联系电话</label>
                <input type="text" id="phone" name="phone" placeholder="联系电话..">


                <label for="subject">留言</label>
                <textarea id="subject" name="subject" placeholder="写入一些信息.." style="height:170px"></textarea>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
</div>
</body>
<script>
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(113.112994,27.830986), 19);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    map.setCurrentCity("株洲");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩
</script>
</html>
<!--
 <li>
		                        <h3>修程优化</h3>
		                        <p>以车辆系统及部件构型为基础，通过故障模式分析、状态监控、寿命预测，解决修程与状态、寿命不匹配问题，避免过度修和重复修。</p>
		                    </li>
		                    <li>
		                        <h3>计划排程优化</h3>
		                        <p>结合均衡修、部件互换修、零部件专业化集中修等检修模式，缩短车辆的停用时间，提高上线率</p>
		                    </li>
		                    <li>
		                        <h3>可靠性分析</h3>
		                        <p>根据故障、时间及里程等履历数据对整车、系统、部件进行可靠性分析。</p>
		                    </li>
		                    <li>
		                        <h3>质量提升</h3>
		                        <p>以结构化作业指导书为基础对关键作业进行过程质量卡控；对故障进行分级、分类闭环管理；多维度统计分析定位薄弱环节。</p>
		                    </li>
		                    <li>
		                        <h3>库存优化</h3>
		                        <p>通过易损易耗件统计、周转期分析、配件消耗预测全面优化库存管理。</p>
		                    </li>
		                    <li>
		                        <h3>成本优化</h3>
		                        <p>通过资产状态和性能管理、更新管理、服务寿命预测，降低成本开支。</p>
		                    </li> -->